<template>
	<div class="look">
		<div class="header" v-show="!isWeiXin">
			<div class="iconfont" @click="goBack">&#xe624;</div>
			查看获取链接
		</div>
		<div class="padd" v-show="!isWeiXin"></div>
		<tab bar-active-color="black" active-color="black" default-color="#969696">
	      <tab-item selected @on-item-click="onItemClick(1)">淘宝/天猫店</tab-item>
	      <tab-item @on-item-click="onItemClick(2)">京东店铺链</tab-item>
	      <tab-item @on-item-click="onItemClick(3)">拼多多店铺</tab-item>
	    </tab>
	    <div class="content" v-show="selected === 1">
	    	<p>1.进入淘宝/天猫店铺</p>
	    	<img src="../../assets/images/coinShop/q1.jpg" alt="" />
	    	<p>2.点击“分享”</p>
	    	<img src="../../assets/images/coinShop/q2.jpg" alt="" />
	    	<p>3.选择“复制链接”即可</p>
	    	<img src="../../assets/images/coinShop/q3.jpg" alt="" />
	    </div>
	    <div class="content" v-show="selected === 2">
	    	<p>1.进入京东店铺</p>
	    	<img src="../../assets/images/coinShop/w1.jpg" alt="" />
	    	<p>2.点击分享，选择“复制链接”即可</p>
	    	<img src="../../assets/images/coinShop/w2.jpg" alt="" />
	    </div>
	    <div class="content" v-show="selected === 3">
	    	<p>1.找到店铺位置，选择“进店逛逛”</p>
	    	<img src="../../assets/images/coinShop/e1.jpg" alt="" />
	    	<p>2.点击分享，选择QQ或微信然后在已发送中“复制链接”即可</p>
	    	<img src="../../assets/images/coinShop/e2.jpg" alt="" />
	    </div>
	</div>
</template>

<script>
	import { Tab, TabItem } from 'vux'
	export default{
		name : 'viewGetLink',
		components:{
			TabItem,
			Tab
		},
		data(){
			return{
				selected : 1,
				isWeiXin : false
			}
		},
		mounted(){
			this.isWeChat()
		},
		methods:{
			goBack(){
				this.$router.go(-1)
			},
			isWeChat(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			    	document.title = '选择专属宝店客'
			       	this.isWeiXin = true
			    }else{
			    	this.isWeiXin = false
			    }
			},
			onItemClick(index){
				this.selected = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.header{
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 1.44rem;
		line-height: 2rem;
		text-align: center;
		font-size: .36rem;
		background: #eee;
		.iconfont{
			position: absolute;
			top:.54rem;
			padding: 0 .2rem;
			height: .9rem;
			line-height: .9rem;
		}
	}
	.padd{
		height: 1.44rem;
	}
	.content{		
		text-align: left;
		background: #fff;
		p{
			padding: .2rem .4rem;
			line-height: .44rem;
		}
	}
</style>